<script setup lang="ts">
import { useLoadMore } from 'vue-request'
import { fetchCasesAPI } from '@/apis/fetchCases'

const router = useRouter()

const searchText = ref('')

/* ------------------------------- 列表数据 START ------------------------------- */
// 案例数据
const { dataList, loading, loadingMore, noMore, loadMore, refresh } = useLoadMore<LoadMoreData<Case>>(
  fetchCases,
  { isNoMore: d => d?.list.length === d?.total },
)

// “加载更多”的状态
const loadMoreStatus = computed(() => {
  if (loadingMore.value)
    return 'loading'
  else if (noMore.value)
    return 'nomore'
  else
    return 'loadmore'
})

const skeletonLength = ref(6)

watch(dataList, (newVal) => {
  if (newVal.length > 0)
    skeletonLength.value = newVal.length
})

onLoad(async (options) => {
  if (options && options.search_text) {
    searchText.value = options.search_text
    refresh()
  }
})

// 页面滑动触底时请求更多数据
onReachBottom(() => {
  loadMore()
})

/**
 * @description useLoadMore 所必需的服务函数
 *
 * @param d - useLoadMore 中的 `data`
 */
async function fetchCases(d?: LoadMoreData<Case>): Promise<LoadMoreData<Case>> {
  const _page = d?.page ? d.page + 1 : 1
  const res = await fetchCasesAPI({
    page: _page.toString(),
    limit: '10',
    keyword: searchText.value.length > 0 ? searchText.value : undefined,
  })
  return {
    list: res.data?.data.data || [],
    page: _page,
    total: res.data?.data.total || 9999,
  }
}
/* -------------------------------- 列表数据 END -------------------------------- */

function handleConfirmSearch() {
  refresh()
}

function handleViewCase(caseItem: Case) {
  if (caseItem.id) {
    router.push({
      name: 'caseDetail',
      params: {
        case_id: caseItem.id?.toString(),
      },
    })
  }
}
</script>

<template>
  <view class="flex flex-col min-h-screen pt-120rpx bg-#F8F8F8">
    <view class="z-100 fixed top-0 x-center h-120rpx flex justify-center items-center bg-#F8F8F8">
      <view class="flex justify-between w-690rpx h-74rpx border-solid border-1px border-#E3E3E3 rounded-full bg-white">
        <view class="flex items-center px-30rpx w-full">
          <image class="w-26rpx h-28rpx mr-13rpx" src="@/static/images/home/search.png" />
          <input
            v-model="searchText" type="text" class="w-full h-74rpx text-28rpx leading-28rpx text-primary" placeholder-class="text-28rpx leading-28rpx text-tertiary"
            placeholder="搜索案例"
          >
        </view>
        <view class="flex justify-center items-center w-148rpx h-74rpx flex-shrink-0 text-28rpx leading-28rpx px-47rpx bg-brand text-white rounded-38rpx" @click="handleConfirmSearch">
          搜索
        </view>
      </view>
    </view>
    <!-- Loading 骨架屏 -->
    <view v-if="loading && !loadingMore" class="w-full h-full bg-#F8F8F8">
      <CaseItemSkeleton v-for="i in skeletonLength" :key="i" />
    </view>
    <block v-else>
      <!-- 真实列表 -->
      <uv-list v-if="dataList.length > 0" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0) !important' }">
        <uv-list-item v-for="item in dataList" :key="item.id" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0) !important' }">
          <CaseItemCard :picture="item.image" :title="item.name" :subtitle="item.introduction" @tap="() => handleViewCase(item)" />
        </uv-list-item>
        <uv-load-more v-if="dataList?.length > 3" :status="loadMoreStatus" @loadmore="loadMore" />
      </uv-list>
      <!-- 缺省页 -->
      <PageDefault v-else />
    </block>
  </view>
</template>

<route lang="yaml">
name: 'search'
style:
  navigationBarTitleText: '搜索'
</route>
